h1 {
    font-family: sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}

.allbar {
    position: relative;
    top: 50px;
    margin: 0 auto;
    width: 80px;
    height: 50px;
}

.bar {
    width: 6px;
    height: 1px;
    background: #333;
    float: left;
    margin: 0 1px;
}

.bar1 {
    -webkit-animation-name: bar1;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

.bar2 {
    -webkit-animation-name: bar2;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
}

.bar3 {
    -webkit-animation-name: bar3;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
}

.bar4 {
    -webkit-animation-name: bar4;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
}

.bar5 {
    -webkit-animation-name: bar5;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
}

.bar6 {
    -webkit-animation-name: bar6;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

.bar7 {
    -webkit-animation-name: bar7;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
}

.bar8 {
    -webkit-animation-name: bar8;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
}

.bar9 {
    -webkit-animation-name: bar9;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
}


@-webkit-keyframes bar1 {
    0% {height: 1px;}
    20% {height: 20px;}
    40% {height: 15px;}
    60% {height: 20px;}
    80% {height: 50px;}
    100% {height: 1px;}
}

@-webkit-keyframes bar2 {
    0% {height: 1px;}
    20% {height: 20px;}
    40% {height: 5px;}
    60% {height: 50px;}
    80% {height: 15px;}
    100% {height: 1px;}
}

@-webkit-keyframes bar3 {
    0% {height: 1px;}
    20% {height: 50px;}
    40% {height: 10px;}
    60% {height: 30px;}
    80% {height: 20px;}
    100% {height: 1px;}
}

@-webkit-keyframes bar4 {
    0% {height: 1px;}
    20% {height: 20px;}
    40% {height: 18px;}
    60% {height: 40px;}
    80% {height: 35px;}
    100% {height: 1px;}
}

@-webkit-keyframes bar5 {
    0% {height: 1px;}
    20% {height: 45px;}
    40% {height: 15px;}
    60% {height: 35px;}
    80% {height: 10px;}
    100% {height: 1px;}
}

@-webkit-keyframes bar6 {
    0% {height: 1px;}
    20% {height: 10px;}
    40% {height: 5px;}
    60% {height: 40px;}
    80% {height: 10px;}
    100% {height: 1px;}
}

@-webkit-keyframes bar7 {
    0% {height: 1px;}
    20% {height: 50px;}
    40% {height: 10px;}
    60% {height: 40px;}
    80% {height: 20px;}
    100% {height: 1px;}
}

@-webkit-keyframes bar8 {
    0% {height: 1px;}
    20% {height: 10px;}
    40% {height: 5px;}
    60% {height: 10px;}
    80% {height: 30px;}
    100% {height: 1px;}
}

@-webkit-keyframes bar9 {
    0% {height: 1px;}
    20% {height: 40px;}
    40% {height: 35px;}
    60% {height: 40px;}
    80% {height: 35px;}
    100% {height: 1px;}
}